<template>
  <div class="main-body">
    <!--工具栏-->
    <div class="toolbar">
      <el-form :inline="true" :model="filters">
        <el-form-item>
          <el-input v-model="filters.name" :placeholder="t('thead.name')"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            icon="search"
            type="primary"
            @click="doSearch"
          >{{ t('action.search') }}</el-button>
        </el-form-item>
        <el-form-item>
          <el-button icon="plus" type="primary" @click="handleAdd">{{ t('action.add') }}</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!--表格树内容栏-->
    <cm-table
      rowKey="id"
      ref="tableRef"
      :get-page="listTree"
      :columns="columns"
      :filters="filters"
      :showBatchDelete="false"
      :showPagination="false"
      @handleEdit="handleEdit"
      @handleDelete="handleDelete"
    ></cm-table>
  </div>
  <!-- 新增修改界面 -->
  <el-dialog
    :title="isEdit ? t('action.edit') : t('action.add')"
    width="40%"
    draggable
    v-model="dialogVisible"
    :close-on-click-modal="false"
    @close="doClose"
  >
    <el-form
      :model="form"
      :rules="rules"
      ref="formRef"
      @keyup.enter="handleSubmit"
      label-width="80px"
    >
      <el-form-item :label="t('thead.type')" prop="type">
        <el-radio-group v-model="form.type" :disabled="isEdit">
          <el-radio
            v-for="(type, index) in menuTypeList"
            :label="index"
            :key="index"
          >{{ t(`status.${type}`) }}</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item :label="t('thead.name')" prop="name">
        <el-input v-model="form.name" :placeholder="t('form.nameRequired')"></el-input>
      </el-form-item>
      <el-form-item :label="t('thead.displayName')" prop="displayName">
        <el-input v-model="form.displayName" :placeholder="t('form.displayNameRequired')"></el-input>
      </el-form-item>
      <el-form-item v-if="form.type !== 2" :label="t('thead.icon')">
        <el-input v-model="form.icon" :placeholder="t('thead.icon')"></el-input>
      </el-form-item>
      <el-form-item :label="t('form.parent')">
        <el-cascader
          v-model="form.parentId"
          :props="{ label: 'displayName', value: 'id', checkStrictly: true, emitPath: false }"
          :options="treeData"
          class="w100p"
        ></el-cascader>
      </el-form-item>
      <el-form-item
        v-if="form.type === 1"
        :label="t('thead.url')"
        :prop="form.type === 1 ? 'url' : ''"
      >
        <el-input v-model="form.url" :placeholder="t('thead.url')"></el-input>
      </el-form-item>
      <el-form-item
        v-if="form.type !== 2"
        :label="t('thead.orderNum')"
        :prop="form.type !== 2 ? 'orderNum' : ''"
      >
        <el-input-number v-model="form.orderNum" controls-position="right" :min="0"></el-input-number>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="doClose">{{ t('action.cancel') }}</el-button>
        <el-button type="primary" @click="handleSubmit">{{ t('action.confirm') }}</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { listTree, listTreeParents, save, update, remove } from '@/apis/app-resource'
import useTableHandlers from '../use-table-handlers'
const menuTypeList = ref(["folder", "menu", "button"])
const filters = reactive({
  name: ""
})
const form = reactive({
  id: '',
  type: 0,
  name: "",
  displayName: "",
  parentId: null,
  url: "",
  orderNum: 0,
  icon: "",
})
const {
  t,
  tableRef,
  dialogVisible,
  isEdit,
  formLoading,
  formRef,
  doSearch,
  doAdd,
  doEdit,
  doRemove,
  doSubmit,
  doClose
} = useTableHandlers(form);
const treeData = ref([])

// computed
const columns = computed(() => [
  { prop: "id", label: t("thead.ID") },
  { prop: "name", label: t("thead.name") },
  { prop: "displayName", label: t("thead.displayName") },
  { prop: "icon", label: t("thead.icon") },
  {
    prop: "type", label: t("thead.type"), formatter: (row) => {
      const type = row.type;
      const typeMap = {
        1: 'success',
        2: 'info'
      }
      return h(
        ElTag,
        {
          type: typeMap[type] || ''
        },
        () => t(`status.${menuTypeList.value[type]}`)
      )
    }
  },
  { prop: "url", label: t("thead.url"), showOverflowTooltip: true },
  { prop: "orderNum", label: t("thead.orderNum") },
])
const rules = ref({
  name: [{ required: true, message: t('form.nameRequired'), trigger: "blur" }],
  displayName: [{ required: true, message: t('form.displayNameRequired'), trigger: "blur" }],
  url: [{ required: true, message: t('form.urlRequired'), trigger: "blur" }],
})

// methods
const initForm = () => {
  listTreeParents().then(res => {
    treeData.value = res.data;
  })
}
function handleAdd() {
  initForm();
  doAdd();
}
function handleEdit(row) {
  initForm(row);
  doEdit(row);
}
function handleDelete(ids, callback) {
  doRemove(remove, ids, callback)
}
function handleSubmit() {
  doSubmit({ save, update });
}
</script>